<template>
  <div class="home">
    <!-- 顶部 -->
    <chart-top :chartData='chartData'></chart-top>
    <!-- 中间 -->
    <chart-main :saleArr="chartData.orderFullYear" :visiteArr="chartData.userFullYear" :x="chartData.orderFullYearAxis"
      :arr="chartData.orderRank" :arr1="chartData.userRank"></chart-main>
    <!-- 底部 -->
    <chart-footer :searchWord="chartData.searchWord"></chart-footer>
  </div>
</template>

<script setup lang="ts">
//引入请求函数
import { reqChartsData } from '../../api/home/home';
//引入子组件
import ChartTop from './ChartTop/index.vue';
import ChartMain from './ChartMain/index.vue';
import ChartFooter from './ChartFooter/index.vue';
//引入钩子
import { onMounted, ref } from 'vue';
let chartData = ref({});
//是否能获取到数据
onMounted(async () => {
  let result = await reqChartsData();
  //储存数据
  chartData.value = result;
});
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  background: #ccc;
  padding: 40px;
}
</style>